<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript"
    src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
  <title>百度地图测试</title>
  <style type="text/css">
    html {
      height: 100%;
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    #container {
      height: 600px;
      width: 800px;
    }

    .anchorBL {
      display: none
    }

    .BMap_stdMpZoom {
      display: block
    }

    #tools {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 10;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <div id="tools">
    <button id="start">开始播放</button>
    <button id="end">停止播放</button>
  </div>
  <script>
    function loadJScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      // callback 定义 加载后 执行的函数
      script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yvu4YGW9MmqqgipzLiiwtX6Yk7SvIFSF&callback=init';
      document.body.appendChild(script);
      //绘制图标

    }
    function init() {
      // console.log(window.BMapGL)  // 地图对象
      var map = new BMapGL.Map("container");
      var point = new BMapGL.Point(116.404, 39.915); // 北京市中心坐标点
      map.centerAndZoom(point, 17, { minZoom: 5, maxZoom: 14, mapType: BMAP_NORMAL_MAP }); // 显示地图, 传入 中心点 与 MapOption
      map.enableScrollWheelZoom(true); // 允许滚轮放大
      map.setHeading(0);
      map.setTilt(0);
      // 添加缩放控件
      var zoomCtrl = new BMapGL.ZoomControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
      });
      // 添加缩放控件
      map.addControl(zoomCtrl);
      // 添加控件 标尺
      var scaleCtrl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMapGL.Size(10, 10) });
      map.addControl(scaleCtrl);
      // track
      var path = [{
        'lng': 116.297611,
        'lat': 40.047363
      }, {
        'lng': 116.302839,
        'lat': 40.048219
      }, {
        'lng': 116.308301,
        'lat': 40.050566
      }, {
        'lng': 116.305732,
        'lat': 40.054957
      }, {
        'lng': 116.304754,
        'lat': 40.057953
      }, {
        'lng': 116.306487,
        'lat': 40.058312
      }, {
        'lng': 116.307223,
        'lat': 40.056379
      }];
      var point = [];
      for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
      }
      var pl = new BMapGL.Polyline(point);
      // 创建 track 对象
      var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
        overallView: true, // 动画完成后自动调整视野到总览
        tilt: 30,          // 轨迹播放的角度，默认为55
        duration: 20000,   // 动画持续时长，默认为10000，单位ms
        delay: 3000        // 动画开始的延迟，默认0，单位ms
      });
      // 3.添加事件
      document.getElementById("start").addEventListener("click", function () {
        trackAni.start(); // 开始播放动画
      });
      document.getElementById("end").addEventListener("click", function () {
        trackAni.cancel(); // 强制停止动画
      });
    }
    window.onload = loadJScript; //异步加载地图
  </script>
</body>

</html>